<%@ page language="java" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap-datetimepicker.min.css">
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap-table.min.css">
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap-table.css">
	<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="assets/vendor/linearicons/style.css">
	<link rel="stylesheet" href="assets/vendor/chartist/css/chartist-custom.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="assets/css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="assets/css/demo.css">
	
	<!-- GOOGLE FONTS -->
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png">
</head>

<body>
		
		<jsp:include page="/assets/jsp/header.jsp" flush="true"/>
		<jsp:include page="/assets/jsp/menu.jsp" flush="true"/>
		<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
				 <form role="form" id="searchForm" class="form-horizontal" style=" border:1px solid #006600">
                 <legend></legend>
                <fieldset>
                    <div class="form-group">
                        <label class="col-sm-2" for="trans_workdate">交易日期</label> 
                        <div class="col-sm-2">
                        	<input type="text"   class="form-control" id="trans_workdate" name="trans_workdate" style=" border:1px solid #006600" >
                        </div>
                        <label class="col-sm-2" for="teller_serno">柜员流水</label> 
                        <div class="col-sm-2">
                        	<input type="text"   class="form-control" id="teller_serno" name="teller_serno" style=" border:1px solid #006600" >
                        </div>
                        <label class="col-sm-2"  for="account_no">客户账号</label>
                        <div class="col-sm-2">
                        <input type="text"    class="form-control" id="account_no" style=" border:1px solid #006600" name="account_no" >
                        </div>
                     </div>
               </fieldset>
               <fieldset>
                     <div class="form-group">
                        
                          <label class="col-sm-2"  for="senior_oir">客户号</label>
                        <div class="col-sm-2">
                        <input type="text"    class="form-control" id="customer_no" style=" border:1px solid #006600" name="customer_no" >
                        </div>
                 
              
                        <label  class="col-sm-2" for="trans_code">交易码</label> 
                        <div class="col-sm-2">
                        <input type="text"      class="form-control" id="trans_code"  style=" border:1px solid #006600" name="trans_code" >
                    
                       </div>
                      </div>
                            
                 </fieldset>       
                  
                    <div class="form-group">
                    	<div class="col-sm-2">
                    	<input type="button"  id="searchBtn" class="btn btn-default" value="开始搜索"/>
                    	</div>
                        <!--  <button type="button" id="searchBtn" class="btn btn-default">开始搜索</button>-->
                    </div>
                </form>
                 <legend></legend>
      
				  <!--列表展示-->
     <table id = "table"  data-filter-control="true"></table>
			<!-- END MAIN CONTENT -->
		</div>
		<!-- END MAIN -->
		<div class="clearfix">
		<footer>
			<div class="container-fluid">
				<p class="copyright">Copyright &copy; 2018.Company  ShanChuanli  All rights reserved.More Templates </p>
			</div>
		</footer>
	 </div>
	</div>
	<!-- END WRAPPER -->
	<!-- Javascript -->
	<script src="assets/vendor/jquery/jquery.min.js"></script>
	<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	<script src="assets/vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js"></script>
	<script src="assets/vendor/chartist/js/chartist.min.js"></script>
	<script src="assets/scripts/klorofil-common.js"></script>
	<script src="assets/scripts/common.js"></script>
	<script src="assets/scripts/bootstrap-datetimepicker.min.js"></script>
	<script src="assets/scripts/bootstrap-table.js"></script>
		<script src="assets/scripts/bootstrap-table-toolbar.js"></script>
	<script type="text/javascript">
	$("#subPages3").addClass("in");
		$(function () {
		    //1.初始化Table
		    var oTable = new TableInit();
		    oTable.Init();
		    //当点击查询按钮的时候执行
	         $("#searchBtn").bind("click", oTable.Init);
		});
		var TableInit = function () {
		    var oTableInit = new Object();
		    //初始化Table
		    oTableInit.Init = function () {
		    	$("#table").bootstrapTable('destroy'); 
		    	$('#table').bootstrapTable({
		            url: '/chuan/queryAccountDetailList.do',         //请求后台的URL（*）
		            method: 'post',                      //请求方式（*）
		            dataField : "data",
		            striped: true,                      //是否显示行间隔色
		            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		            pagination: true,                   //是否显示分页（*）
		            sortable: false,                     //是否启用排序
		            sortOrder: "asc",                   //排序方式
		            queryParams: oTableInit.queryParams,//传递参数（*）
		            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
		            pageNumber:1,                       //初始化加载第一页，默认第一页
		            pageSize: 10,                       //每页的记录行数（*）
		            pageList: [10, 25],        //可供选择的每页的行数（*）
		            strictSearch: true,
		            minimumCountColumns: 2,             //最少允许的列数
		            clickToSelect: true,                //是否启用点击选中行
		            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
		            uniqueId: "number",                     //每一行的唯一标识，一般为主键列
		            cardView: false,                    //是否显示详细视图
		            detailView: false,                   //是否显示父子表
		            columns: [ {
                        field: 'trans_workdate',
                        title: '主机日期',
                        align: 'center' // 居中显示
                    }, {
                        field: 'teller_serno',
                        title: '柜员流水',
                        align: 'center' // 居中显示
                    }, {
                        field: 'account_no',
                        title: '账号',
                        align: 'center' // 居中显示
                    }, {
                        field: 'sequence',
                        title: '序号',
                        align: 'center' // 居中显示
                    }, {
                        field: 'mainframe_workdate',
                        title: '主机日期',
                        align: 'center' // 居中显示
                    }, {
                        field: 'trans_code',
                        title: '交易码',
                        align: 'center' // 居中显示
                    }, {
                        field: 'dcflag',
                        title: '借贷标志',
                        align: 'center' // 居中显示
                    }, {
                        field: 'trans_amount',
                        title: '交易金额',
                        align: 'center' // 居中显示
                    }, {
                        field: 'balance',
                        title: '账户余额',
                        align: 'center' // 居中显示
                    }, {
                        field: 'balance_direct',
                        title: '余额方向',
                        align: 'center' // 居中显示
                    }, {
                        field: 'trans_teller',
                        title: '交易柜员',
                        align: 'center' // 居中显示
                    }, {
                        field: 'auth_teller',
                        title: '授权柜员',
                        align: 'center' // 居中显示
                    }, {
                        field: 'customer_no',
                        title: '客户号',
                        align: 'center' // 居中显示
                    }, {
                        field: 'customer_name',
                        title: '客户名称',
                        align: 'center' // 居中显示
                    }, {
                        field: 'trans_ori',
                        title: '交易机构',
                        align: 'center' // 居中显示
                    }, {
                        field: 'subject_number',
                        title: '科目号',
                        align: 'center' // 居中显示
                    }, {
                        field: 'currenry',
                        title: '货币代号',
                        align: 'center' // 居中显示
                    }]
		        });
		    };
		  //得到查询的参数
		    oTableInit.queryParams = function (params) {
		        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
		            limit: params.limit,   //页面大小
		            offset: params.offset,  //页码
		            trans_workdate: $("#trans_workdate").val(),
		            teller_serno: $("#teller_serno").val(),
		            account_no: $("#account_no").val(),
		            customer_name: $("#customer_name").val(),
		            customer_no: $("#customer_no").val(),
		            trans_code: $("#trans_code").val()
		        };
		        return temp;
		    };
		    return oTableInit;
		};

		

	
	</script>
</body>

</html>
